<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    v-model： input(text,password) textarea--- value

    v-model： input(checkbox,radio,必须有value)
    select option(可以不写value,不写就取option中间的内容，写了就取value)

    --- 选中的状态
    <div id="app">
        <input type="text" v-model="inp">
        <h1>{{inp}}</h1>
        <textarea cols="30" rows="10" v-model="inp"></textarea>

        <br>
        <input type="checkbox" id="aa" v-model="flag">
        <label for="aa">AA--{{flag}}</label>

        <br>
        <input type="checkbox" id="one" value="a" v-model="arrA">
        <label for="one">ONE</label>
        <input type="checkbox" id="two" value="b" v-model="arrA">
        <label for="two">TWO</label>
        <input type="checkbox" id="three" value="c" v-model="arrA">
        <label for="three">THREE</label>
        <h1>{{arrA}}</h1>

        <br>
        <input type="radio" name="sex" id="man" value="man1" v-model="sexStr">
        <label for="man">男</label>
        <input type="radio" name="sex" id="woman" value="woman1" v-model="sexStr">
        <label for="woman">女</label>
        <h1>{{sexStr}}</h1>

        <br>
        <select v-model="selecteda" multiple>
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
        </select>
        <h1>{{selecteda}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                inp: "",//value--字符串
                flag: true,//单个选中状态---布尔
                arrA: [],//多选---数组
                sexStr: "man1",//单选---字符串
                selecteda: []//下拉列表 多选--数组  单选---字符串
            }
        })
    </script>
</body>

</html>